window.onload = function () {
    //预览图盒子
    var previewImg = document.querySelector(".preview-img")
    var mask = document.querySelector(".mask")
    var big = document.querySelector(".big")
    //为previewImg绑定鼠标事件
    previewImg.addEventListener('mouseenter',function () {
        //将mask和big显示出来
        mask.style.display = 'block'
        big.style.display = 'block'
    })

    previewImg.addEventListener('mouseleave',function () {
        //将mask和big隐藏出来
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    
    //绑定鼠标的移动事件
    previewImg.addEventListener('mousemove',function (e) {
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;
        // console.log("("+mousePageX+","+mousePageY+")")
        let previewImgLeft = this.offsetLeft;
        let previewImgTop = this.offsetTop;
        let maskX = mousePageX - previewImgLeft
        let maskY = mousePageY - previewImgTop
        //获取mask盒子的尺寸
        let maskWidth = mask.offsetWidth;
        let maskHeight = mask.offsetHeight;
        //减去自己宽、高的一半
        maskX = maskX - maskWidth/2
        maskY = maskY - maskHeight/2
        //调整盒子的范围，不能越界
        if(maskX<0){
            maskX = 0
        }else if(maskX>100){
            maskX = 100
        }
        if(maskY<0){
            maskY = 0
        }else if(maskY>100){
            maskY = 100
        }
        //给mask盒子设置坐标
        mask.style.top = maskY+'px'
        mask.style.left = maskX +'px'
        //功能3：
        let bigImg = big.querySelector("img");
        bigImg.style.left = -maskX*300/100 + 'px'
        bigImg.style.top = -maskY*300/100 + 'px'
    })
}